/**
 * SelectList 组件使用示例
 */

// 基础使用示例
export const basicExample = `
<template>
  <select-list
    v-model="selectedValue"
    :options="options"
    placeholder="请选择"
    clearable
  />
</template>

<script setup>
import { ref } from 'vue'

const selectedValue = ref('')
const options = ref([
  { id: 1, label: '选项1' },
  { id: 2, label: '选项2' },
  { id: 3, label: '选项3', disabled: true }
])
</script>
`

// 多选示例
export const multipleExample = `
<template>
  <select-list
    v-model="selectedValues"
    :options="options"
    multiple
    placeholder="请选择多个选项"
    collapse-tags
    collapse-tags-tooltip
  />
</template>

<script setup>
import { ref } from 'vue'

const selectedValues = ref([])
const options = ref([
  { id: 1, label: '选项1' },
  { id: 2, label: '选项2' },
  { id: 3, label: '选项3' },
  { id: 4, label: '选项4', disabled: true }
])
</script>
`

// 自定义键名示例
export const customKeysExample = `
<template>
  <select-list
    v-model="selectedUser"
    :options="users"
    value-key="userId"
    label-key="userName"
    disabled-key="isDisabled"
    key-field="userId"
    placeholder="请选择用户"
  />
</template>

<script setup>
import { ref } from 'vue'

const selectedUser = ref('')
const users = ref([
  { userId: 'u001', userName: '张三', isDisabled: false },
  { userId: 'u002', userName: '李四', isDisabled: false },
  { userId: 'u003', userName: '王五', isDisabled: true }
])
</script>
`

// 空值选项示例
export const emptyOptionExample = `
<template>
  <select-list
    v-model="selectedValue"
    :options="options"
    :empty-option="{ label: '全部', value: '', disabled: false }"
    show-empty-option
    placeholder="请选择"
  />
</template>

<script setup>
import { ref } from 'vue'

const selectedValue = ref('')
const options = ref([
  { id: 1, label: '类型1' },
  { id: 2, label: '类型2' },
  { id: 3, label: '类型3' }
])
</script>
`

// 回显示例
export const echoExample = `
<template>
  <div>
    <p>当前选中ID: {{ selectedId }}</p>
    <p>当前选中选项: {{ JSON.stringify(currentOption) }}</p>
    
    <select-list
      ref="selectRef"
      v-model="selectedId"
      :options="options"
      @change="handleChange"
    />
    
    <el-button @click="setEchoValue">设置回显值</el-button>
  </div>
</template>

<script setup>
import { ref, nextTick } from 'vue'

const selectRef = ref()
const selectedId = ref(2) // 初始回显ID为2
const currentOption = ref()

const options = ref([
  { id: 1, label: '北京' },
  { id: 2, label: '上海' },
  { id: 3, label: '广州' },
  { id: 4, label: '深圳' }
])

const handleChange = (value, option) => {
  console.log('选中值:', value)
  console.log('选中选项:', option)
  currentOption.value = option
}

const setEchoValue = () => {
  selectedId.value = 3 // 设置为广州
  nextTick(() => {
    // 获取当前选中的完整选项数据
    const selected = selectRef.value?.getSelectedOptions()
    console.log('回显后的选项:', selected)
  })
}
</script>
`

// 表单验证示例
export const validationExample = `
<template>
  <el-form :model="form" :rules="rules" ref="formRef">
    <el-form-item label="选择城市" prop="city" required>
      <select-list
        v-model="form.city"
        :options="cityOptions"
        placeholder="请选择城市"
        @change="handleCityChange"
      />
    </el-form-item>
    
    <el-form-item label="选择区域" prop="districts" required>
      <select-list
        v-model="form.districts"
        :options="districtOptions"
        multiple
        placeholder="请选择区域"
        :disabled="!form.city"
      />
    </el-form-item>
    
    <el-form-item>
      <el-button type="primary" @click="submitForm">提交</el-button>
      <el-button @click="resetForm">重置</el-button>
    </el-form-item>
  </el-form>
</template>

<script setup>
import { ref, watch } from 'vue'

const formRef = ref()
const form = ref({
  city: '',
  districts: []
})

const rules = {
  city: [{ required: true, message: '请选择城市', trigger: 'change' }],
  districts: [{ required: true, message: '请选择区域', trigger: 'change' }]
}

const cityOptions = ref([
  { id: 1, label: '北京' },
  { id: 2, label: '上海' },
  { id: 3, label: '广州' }
])

const districtOptions = ref([])

const districtMap = {
  1: [
    { id: 11, label: '朝阳区' },
    { id: 12, label: '海淀区' },
    { id: 13, label: '西城区' }
  ],
  2: [
    { id: 21, label: '浦东新区' },
    { id: 22, label: '黄浦区' },
    { id: 23, label: '徐汇区' }
  ],
  3: [
    { id: 31, label: '天河区' },
    { id: 32, label: '越秀区' },
    { id: 33, label: '海珠区' }
  ]
}

const handleCityChange = (cityId) => {
  form.value.districts = [] // 重置区域选择
  districtOptions.value = districtMap[cityId] || []
}

const submitForm = () => {
  formRef.value?.validate((valid) => {
    if (valid) {
      console.log('表单数据:', form.value)
    }
  })
}

const resetForm = () => {
  formRef.value?.resetFields()
  districtOptions.value = []
}
</script>
`
